<template>
	<div class="login_page_wrapper">
		<div class="form_wrapper">
			<div class="header">
				<h3>欢迎登录</h3>
				<h2>{{ siteInfo.name }}</h2>
			</div>
			<el-form ref="loginForm" :rules="formRules" :model="loginForm">
				<el-form-item prop="account">
					<el-input
						auto-complete="new-password"
						prefix-icon="sw-icon-login-email"
						placeholder="请输入您的用户账号"
						v-model="loginForm.account"
						@keyup.enter.native="handleSubmitLogin"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						prefix-icon="sw-icon-login-pass"
						show-password
						placeholder="请输入您的登录密码"
						v-model="loginForm.password"
						@keyup.enter.native="handleSubmitLogin"
					></el-input>
				</el-form-item>
				<el-form-item prop="imageCode" v-if="!!verifyCodeImg">
					<div class="login_verify_code">
						<el-input
							prefix-icon="sw-icon-verify-code"
							maxlength="4"
							placeholder="请输入验证码"
							v-model="loginForm.imageCode"
							@input="verifyCodeFormat"
							@keyup.enter.native="handleSubmitLogin"
						></el-input>
						<img :src="verifyCodeImg" @click="getVerifyCode" />
					</div>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSubmitLogin" :loading="btnLoading">登录</el-button>
				</el-form-item>
			</el-form>
			<el-divider></el-divider>
			<div class="bottom">
				<p>
					<span>还没账号？</span>
					<router-link :to="{ path: '/register' }">注册</router-link>
				</p>
				<p><router-link :to="{ path: '/forgetpass' }">忘记密码</router-link></p>
			</div>
		</div>
		<div class="tips_wrapper">
			<div v-html="siteInfo.field10"></div>
		</div>
	</div>
</template>

<script>
import rsa from '@/utils/rsa';
import { login } from '@/api/login';
import { mapGetters, mapActions } from 'vuex';
import { generateVerifyCode, loginAddUserInfo } from '@/api/global';
export default {
	data() {
		return {
			loading: false,
			verifyCodeImg: '',
			loginForm: { account: '', password: '' /* imageCode: '' */ },
			formRules: {
				account: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
				password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
				imageCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
			},
			btnLoading: false
		};
	},
	computed: { ...mapGetters(['siteInfo']) },
	mounted() {
		this.getVerifyCode();
	},
	methods: {
		...mapActions(['getPermissionMenu', 'getUserByRoleType']),

		//提交登录
		handleSubmitLogin() {
			this.$refs['loginForm'].validate((vail) => {
				if (!vail) return false;
				this.btnLoading = true;
				this.loginRequest(this.loginForm)
					.then(async (data) => {
						let user = await this.getUserByRoleType();
						let menu = await this.getPermissionMenu();
						if (!!user && !!menu) {
							this.$showCustomMessage('success', '登录成功');
							this.$store.commit('SET_USER_INFO', data);
							this.$router.replace('/admin');
						}
					})
					.catch(() => {
						this.getVerifyCode();
					});
			});
		},

		//登录请求
		loginRequest(data) {
			return new Promise(async (resolve, reject) => {
				let params = { ...this.$deepClone(data), password: rsa.rsaPublicData(data.password) };
				let result = await login(params);
				this.btnLoading = false;
				if (result.data.code === 0) {
					loginAddUserInfo();
					this.$store.commit('SET_TOKEN', result.headers['authorization']);
					resolve(result.data.data[0]);
				} else {
					reject();
				}
			});
		},

		//获取验证码
		async getVerifyCode() {
			this.$set(this.loginForm, 'imageCode', '');
			this.verifyCodeImg = await generateVerifyCode('123').then((res) => res.data);
		},

		//大写转化
		verifyCodeFormat(value) {
			this.loginForm.imageCode = value.toUpperCase().replace(/[^A-Z0-9]/g, '');
		}
	}
};
</script>

<style lang="scss" scoped>
.login_page_wrapper {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	.tips_wrapper::v-deep {
		flex: 1;
		padding: 4%;
		flex-shrink: 0;
		min-width: 450px;
		max-width: 600px;
		box-sizing: border-box;
		background-color: var(--primary-hover);
		& > * {
			color: #fff;
			font-size: 16px;
			line-height: 1.5;
		}
	}
	.form_wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		padding: 4%;
		flex-shrink: 0;
		border-radius: 0;
		min-width: 450px;
		max-width: 600px;
		background-color: #fff;
		.header {
			padding-bottom: 22px;
			border-bottom: solid 1px #dcdfe6;
			h3 {
				font-size: 20px;
				margin-bottom: 16px;
			}
			h2 {
				width: 270px;
				font-size: 24px;
				line-height: 1.25;
				margin-bottom: 0;
				color: var(--primary-color-active);
			}
		}
		.el-form::v-deep {
			padding-top: 22px;
			.el-input__inner {
				font-size: 16px;
				border-radius: 0;
				border-top: none;
				border-left: none;
				border-right: none;
			}
		}
		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 16px;
		}
	}
}

.login_verify_code {
	display: flex;
	img {
		flex-shrink: 0;
		margin-left: 10px;
	}
}
</style>
